<%--
  Created by IntelliJ IDEA.
  User: 薄
  Date: 2025/8/22
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!-- 移除了不必要的 d-flex 等类，让菜单项垂直排列 -->
<li class="border-bottom">
    <%-- 计算当前层级的缩进值（30px * 层级） --%>
    <c:set var="indent" value="${allLevel * 30 + 30}" scope="request"/>

    <%-- 判断当前菜单项是否有子菜单 --%>
    <c:choose>
        <%-- 如果存在子菜单 --%>
        <c:when test="${not empty allMenu.children}">
            <%-- 有子菜单的项，设置折叠链接样式 --%>
            <a class="nav-link has-children collapsed d-block"
               data-bs-toggle="collapse"
               href="#all-submenu-${allMenu.id}"
               style="padding-left: 0;">
                <div style="margin-left: 30px;">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <!-- 左侧：图标和名称 -->
                        <div class="flex-grow-1" style="width: 250px;">
                            <div class="d-flex align-items-center">
                                <i class="${fn:contains(allMenu.icon, ' ') ? allMenu.icon : 'bi '.concat(allMenu.icon)}"></i>
                                <span class="ms-2">${allMenu.name}</span>
                                <i class="bi bi-chevron-right ms-2"></i>
                            </div>
                        </div>

                        <!-- 中间：路径 -->
                        <div class="flex-grow-1" style="width: 300px;">
                            <small class="text-muted">路径: ${allMenu.path}</small>
                        </div>

                        <!-- 右侧：状态 -->
                        <div class="flex-grow-1 text-end" style="width: 150px;">
                            <c:choose>
                                <c:when test="${allMenu.state eq true}">
                                    <small class="text-success">状态: 启用</small>
                                </c:when>
                                <c:otherwise>
                                    <small class="text-danger">状态: 未启用</small>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
            </a>

            <%-- 创建可折叠的子菜单容器，使用不同的ID前缀 --%>
            <div class="collapse" id="all-submenu-${allMenu.id}">
                <%-- 子菜单列表容器 --%>
                <ul class="nav flex-column">
                    <%-- 遍历所有子菜单项 --%>
                    <c:forEach items="${allMenu.children}" var="child">
                        <%-- 将当前子菜单项设为新的菜单变量供递归使用 --%>
                        <c:set var="allMenu" value="${child}" scope="request"/>

                        <%-- 增加菜单层级（用于子菜单缩进） --%>
                        <c:set var="allLevel" value="${allLevel + 1}" scope="request"/>

                        <%-- 递归调用自身来渲染子菜单 --%>
                        <jsp:include page="allMenus.jsp"/>

                        <%-- 递归返回后恢复父级菜单层级（避免影响同级菜单） --%>
                        <c:set var="allLevel" value="${allLevel - 1}" scope="request"/>
                    </c:forEach>
                </ul>
            </div>
        </c:when>

        <%-- 如果没有子菜单 --%>
        <c:otherwise>
            <%-- 无子菜单的项，创建普通文本元素，样式上显示为不可点击 --%>
            <div class="nav-link text-muted d-block"
                  style="padding-left: 0; cursor: default;">
                <div style="margin-left: 30px;">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <!-- 左侧：图标和名称 -->
                        <div class="flex-grow-1" style="width: 250px;">
                            <div class="d-flex align-items-center">
                                <i class="${fn:contains(allMenu.icon, ' ') ? allMenu.icon : 'bi '.concat(allMenu.icon)} text-muted"></i>
                                <span class="ms-2">${allMenu.name}</span>
                                <i class="bi bi-leaf ms-2 text-muted"></i>
                            </div>
                        </div>

                        <!-- 中间：路径 -->
                        <div class="flex-grow-1" style="width: 300px;">
                            <small class="text-muted">路径: ${allMenu.path}</small>
                        </div>

                        <!-- 右侧：状态 -->
                        <div class="flex-grow-1 text-end" style="width: 150px;">
                            <c:choose>
                                <c:when test="${allMenu.state eq true}">
                                    <small class="text-success">状态: 启用</small>
                                </c:when>
                                <c:otherwise>
                                    <small class="text-danger">状态: 未启用</small>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
            </div>
        </c:otherwise>
    </c:choose>
</li>
